<template>
  <div class="container-xl bg-white m-pt-6">
    <div class="row heid" :style="{ marginBottom: '20px' }">
      <div class="col">
        <strong>创建专题</strong>
      </div>
    </div>
    <div class="row">
      <div class="col">
        <!-- 默认 isAdmin = false -->
        <createdquestionbankVue ref="createdquestionbank" :ID="ID" :user="user" :isAdmin="false">
        </createdquestionbankVue>
      </div>
    </div>
    <div class="row" :style="{ marginTop: '48px' }">
      <div class="col text-right">
        <router-link :to="{ name: '题单' }" custom v-slot="{ navigate }">
          <el-button type="info" @click="navigate">取消</el-button>
        </router-link>
        <el-button @click="submit" type="primary" v-loading="loading">保存</el-button>

      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ElMessage } from "element-plus";
import { computed, ref } from "vue";
import { useStore } from "vuex";
import {
  asyncchangequestionquestionbank,
  asynccreateorupdatequestionbank
} from "../../../api/index";
import Studycodemodel from "../../../mysql_interface/studycodemodel";
import createdquestionbankVue from "../../components/createdquestionbank/index.vue";

import { useRouter } from "vue-router";
import { Storekey } from "../../../interface";

defineProps<{ ID?: number }>()

const router = useRouter()
const store = useStore(Storekey)
const user = computed<Studycodemodel.Iuser>(() => {
  return store.getters.getuser;
});
const teamId = computed(() => {
  return user.value?.teamid
})
const isAdmin = computed(() => {
  return user.value?.isAdmin
})

const loading = ref(false)

const questionid = ref<Studycodemodel.Iquestion[]>([])

const createdquestionbank = ref()

async function submit() {
  loading.value = true;
  try {
    const ruleForm = createdquestionbank.value.ruleForm
    ruleForm.user = undefined;
    ruleForm.team = undefined;
    ruleForm.type = "code";
    if (ruleForm.usertype === "team") {
      if (!ruleForm.teamid) {
        ElMessage.error("团队题单必须选择团队");
        return;
      }
    } else if (ruleForm.usertype === "user") {
      ruleForm.teamid = undefined;
    } else {
      ElMessage.error(
        "只能创建修改团队或者个人题单，其他类型请去管理员平台创建修改"
      );
      return;
    }
    ruleForm.userid = store.getters.getuser.ID;

    const questionbank = await asynccreateorupdatequestionbank(ruleForm);

    ElMessage({
      message: "添加成功",
      type: "success",
    });
    const newvale: Studycodemodel.Iquestionquestionbank[] =
      createdquestionbank.value.questionid.map((v: { ID: any, df: number }, index: any) => {
        return {
          questionbankid: questionbank.ID,
          questionid: v.ID,
          sortindex: index,
          df: v.df
        };
      });
    await asyncchangequestionquestionbank({
      questionbankid: questionbank.ID as number,
      list: newvale,
    });
    loading.value = false;
    router.push({ name: '题单' });
  } catch (e: any) {
    loading.value = false;
    ElMessage({
      message: e,
      type: "error",
    });
  }
}

</script>

<style scoped>
.container-xl {
  min-height: 80vh;
  padding: 24px;
  margin-top: 40px;
}

.ant-bg {
  border-radius: 4px;
  padding: 24px;
}

.col-left {
  height: 924.99px;
  background: #ffffff;
  border: 1px solid #d9d9d9;
  box-shadow: 0px 0.3px 0.9px rgba(0, 0, 0, 0.1),
    0px 1.6px 3.6px rgba(0, 0, 0, 0.13);
  border-radius: 4px;
  padding: 24px;
  margin-right: 6px;
}

.col-right {
  height: 924.99px;
  background: #ffffff;
  border: 1px solid #d9d9d9;
  box-shadow: 0px 0.3px 0.9px rgba(0, 0, 0, 0.1),
    0px 1.6px 3.6px rgba(0, 0, 0, 0.13);
  border-radius: 4px;
  padding: 24px;
  margin-left: 6px;
}

.mydata {
  height: 680px;
  overflow-y: auto;
  overflow-x: hidden;
}

.mydata::-webkit-scrollbar {
  width: 0px;
  height: 1px;
}

.mydata::-webkit-scrollbar-thumb {
  border-radius: 3px;
  box-shadow: inset 0 0 5px rgba(0, 0, 255, 0.3);
  background: #535353;
}

.mydata::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgba(0, 0, 255, 0.3);
  border-radius: 3px;
  background: #ededed;
}

.input {
  display: inline-block;
  width: 246px;
}

.col-center div {
  width: 90px;
}

.container-fluid .row {
  margin-bottom: 12px;
}

.icon-class-var {
  display: none;
}

.list:hover {
  color: var(--color-cheng);
}

.list:hover .icon-class-var {
  display: inline-block;
}
</style>

<style>
.mydata .el-checkbox__label {
  display: none;
}
</style>